<template>
  <div class="space-y-4">
    <!-- 建议卡片 -->
    <div 
      v-for="(suggestion, index) in suggestions" 
      :key="index"
      class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition-shadow"
    >
      <!-- 建议标题 -->
      <div class="flex items-start justify-between mb-4">
        <div class="flex items-center space-x-2">
          <div 
            class="w-8 h-8 rounded-full flex items-center justify-center text-white font-medium"
            :class="getPriorityClass(suggestion.priority)"
          >
            {{ index + 1 }}
          </div>
          <h3 class="text-lg font-medium text-gray-900">
            {{ suggestion.title || `建议 ${index + 1}` }}
          </h3>
        </div>
        
        <!-- 优先级标签 -->
        <span 
          v-if="suggestion.priority"
          class="px-2 py-1 text-xs font-medium rounded-full"
          :class="getPriorityBadgeClass(suggestion.priority)"
        >
          {{ getPriorityName(suggestion.priority) }}
        </span>
      </div>
      
      <!-- 建议内容 -->
      <div class="text-gray-700 leading-relaxed mb-4">
        {{ suggestion.content }}
      </div>
      
      <!-- 升格示例 -->
      <div 
        v-if="suggestion.example"
        class="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200"
      >
        <div class="flex items-center space-x-2 mb-3">
          <Lightbulb class="w-4 h-4 text-amber-500" />
          <span class="text-sm font-medium text-gray-700">升格示例</span>
        </div>
        
        <!-- 修改前 -->
        <div class="mb-3">
          <div class="flex items-center space-x-2 mb-1">
            <X class="w-3 h-3 text-red-500" />
            <span class="text-xs text-gray-500">修改前</span>
          </div>
          <div class="text-sm text-gray-600 pl-5">
            {{ suggestion.example.before }}
          </div>
        </div>
        
        <!-- 修改后 -->
        <div>
          <div class="flex items-center space-x-2 mb-1">
            <Check class="w-3 h-3 text-green-500" />
            <span class="text-xs text-gray-500">修改后</span>
          </div>
          <div class="text-sm text-green-700 font-medium pl-5">
            {{ suggestion.example.after }}
          </div>
        </div>
        
        <!-- 改进说明 -->
        <div v-if="suggestion.example.explanation" class="mt-3 pt-3 border-t border-gray-200">
          <p class="text-xs text-gray-600 italic">
            💡 {{ suggestion.example.explanation }}
          </p>
        </div>
      </div>
      
      <!-- 相关资源链接 -->
      <div 
        v-if="suggestion.resources && suggestion.resources.length > 0"
        class="mt-4 flex flex-wrap gap-2"
      >
        <a
          v-for="(resource, rIndex) in suggestion.resources"
          :key="rIndex"
          :href="resource.url"
          target="_blank"
          class="inline-flex items-center space-x-1 px-3 py-1 text-xs text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 rounded-full transition-colors"
        >
          <ExternalLink class="w-3 h-3" />
          <span>{{ resource.title }}</span>
        </a>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="suggestions.length === 0" class="text-center py-12">
      <Sparkles class="w-16 h-16 text-gray-400 mx-auto mb-4" />
      <p class="text-gray-600">暂无建议</p>
      <p class="text-sm text-gray-500 mt-2">你的作文已经很棒了！</p>
    </div>
    
    <!-- 总结卡片 -->
    <div 
      v-if="summary && suggestions.length > 0"
      class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg shadow-sm p-6 border border-blue-200"
    >
      <div class="flex items-start space-x-3">
        <Target class="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-2">改进重点</h3>
          <p class="text-gray-700 leading-relaxed">{{ summary }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { 
  Lightbulb, 
  Check, 
  X, 
  ExternalLink, 
  Sparkles,
  Target
} from 'lucide-vue-next';

/**
 * SuggestionPanel 组件
 * 显示批改建议列表，包括升格示例和改进重点
 */

// ==================== Props ====================
const props = defineProps({
  /**
   * 建议列表
   * @type {Array<{ 
   *   title: string, 
   *   content: string, 
   *   priority: string, 
   *   example: { before: string, after: string, explanation: string },
   *   resources: Array<{ title: string, url: string }>
   * }>}
   */
  suggestions: {
    type: Array,
    default: () => [],
  },
  
  /**
   * 总结性改进建议
   */
  summary: {
    type: String,
    default: '',
  },
});

// ==================== Methods ====================

/**
 * 获取优先级名称
 */
const getPriorityName = (priority) => {
  const names = {
    'high': '重要',
    'medium': '一般',
    'low': '次要',
  };
  return names[priority] || priority;
};

/**
 * 获取优先级圆圈样式
 */
const getPriorityClass = (priority) => {
  const classes = {
    'high': 'bg-red-500',
    'medium': 'bg-amber-500',
    'low': 'bg-blue-500',
  };
  return classes[priority] || 'bg-gray-500';
};

/**
 * 获取优先级徽章样式
 */
const getPriorityBadgeClass = (priority) => {
  const classes = {
    'high': 'bg-red-100 text-red-800',
    'medium': 'bg-amber-100 text-amber-800',
    'low': 'bg-blue-100 text-blue-800',
  };
  return classes[priority] || 'bg-gray-100 text-gray-800';
};
</script>

<style scoped>
/* 确保外部链接在新窗口打开 */
a[target="_blank"]::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
}
</style>

